<script setup>

import {BaseImgUrl} from "../utils/lshttp";
import {ref} from "vue";
import {onPageScroll} from "@dcloudio/uni-app";

const scrollTop = ref(0)
onPageScroll(e => {
  console.log("onScrollChange", e.scrollTop)
  scrollTop.value = e.scrollTop
})
const data1 = ref([
  {
    "icon": BaseImgUrl + "/raffle/order.png",
    "title": "有效订单（1/1）",
    "sub_title": "完成任务，抽奖机会+1",
    "success": true,
  }, {
    "icon": BaseImgUrl + "/raffle/order.png",
    "title": "有效订单（0/3）",
    "sub_title": "完成任务，抽奖机会+1",
    "success": false,
  }, {
    "icon": BaseImgUrl + "/raffle/order.png",
    "title": "有效订单（0/18）",
    "sub_title": "完成任务，抽奖机会+1",
    "success": false,
  }
])
const toLuckTest = () => {
  uni.navigateTo({url: "kevy-luckydraw"})
}
</script>

<template>
  <view class="raffle_content">
    <view class="navbar" :style="{background: `rgba(232, 57, 47, ${scrollTop/88 > 0.92 ? 0.92 : scrollTop/88})`}">
      <u-status-bar></u-status-bar>
      <view class="back_content" @click="okBack">
        <view style="padding-left: 30rpx;"></view>
        <u-icon name="arrow-left"
                color="white"
                size="20"></u-icon>
        <text
            style="font-weight: 400;font-size: 36rpx;line-height: 44px;height:44px;position: absolute;width: 100%;text-align: center;color: white">
          幸运抽奖
        </text>
      </view>
    </view>
    <view style="position: absolute;top:0;left: 0;display: flex;flex-direction: column" @click="toLuckTest">
      <image style="height: 1608rpx;width: 750rpx" :src="BaseImgUrl + '/raffle/幸运抽奖bg1.png'"></image>
      <image style="height: 1608rpx;width: 750rpx;margin-top: -1px"
             :src="BaseImgUrl + '/raffle/幸运抽奖bg2.png'"></image>
    </view>
    <view style="margin: 0 30rpx;top:1310rpx;position: absolute">
      <view style="font-weight: 400;font-size: 32rpx;color: #FFDBA9;width: 690rpx;text-align: center">
        可抽奖次数：3
      </view>
      <image style="width: 690rpx;;height:792rpx;z-index: 1;margin-top: 10rpx;position: absolute"
             :src="BaseImgUrl + '/raffle/下单的抽奖机会.png'"></image>
      <view style="margin-top: 228rpx">
        <view v-for="(item,index) in data1" :key="index" style="position: relative;z-index: 1;margin: 30rpx">
          <view
              style="width: 630rpx;height: 160rpx;background: #FFFFFF;border-radius: 16rpx;display: flex;align-items: center;padding: 0 30rpx">
            <image style="height: 80rpx;width: 80rpx;" :src="item.icon"></image>
            <view style="margin-left: 20rpx">
              <view class="title">{{ item.title }}</view>
              <view class="sub_title">{{ item.sub_title }}</view>
            </view>
            <view style="flex: 1"></view>
            <view :class="item.success?'btn1':'btn2'">{{ item.success ? '已完成' : '去下单' }}</view>
          </view>
        </view>
      </view>
      <image style="width: 690rpx;;height:980rpx;z-index: 1;margin-top: 10rpx;position: absolute"
             :src="BaseImgUrl + '/raffle/活动规则说明.png'"></image>
      <view style="margin-top: 228rpx">
        <view
            style="position: relative;z-index: 1;margin: 30rpx;font-weight: 400;font-size: 26rpx;color: #3D3D3D;line-height: 56rpx;">
          <view style="height: 30rpx"></view>
          <up-parse content="1. 本活动为新人专享福利\n
          2. 活动规则：在规定时间内，报名参加平台霸王餐活动 商家（平台品质标签活动商家、品质专享商家、官 反标签活动商家除外），完成指定单数并且为有效 订单，即可获得抽奖机会。\n
          3. 单个用户最多可获得 3 次抽奖机会，不同指定单数对 应的抽奖机会可通过单数 tab 来进行切换。\n
          4. 免单券使用规则：抽奖有概率抽中惊喜免单（免单= 商家满反门槛-返利金额），免单金额最高不超过15 元；\n
          5. 免单券有效期为 7 天，7 天内未使用免单券的，系统 将会回收，不可补发。"></up-parse>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.raffle_content {
  position: relative;
}

.navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;
  background-color: #e8392f;

  .back_content {
    display: flex;
    align-items: center;
    height: 44px;
  }
}

.title {
  font-weight: 400;
  font-size: 30rpx;
  color: #3D3D3D;
  line-height: 42rpx;
}

.sub_title {
  font-weight: 400;
  font-size: 26rpx;
  color: #888888;
  line-height: 36rpx;
}

.btn1 {
  color: white;
  width: 140rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 26rpx;
  background: linear-gradient(131deg, #B5B5B5 0%, #BBBBBB 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
}

.btn2 {
  color: white;
  width: 140rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 26rpx;
  background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
}
</style>